<script setup lang="ts">
import Header from '@/components/Header/Header.vue';
</script>

<template>
    <div class="author">
        <Header />
        <div class="author-main">
            <h1 class="title">关于作者</h1>
            <p class="item">一名 TypeScript 爱好者。</p>
        </div>
    </div>
</template>

<style scoped lang="scss">
@use '@/style/global' as global;

.author {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    // 蠕动渐变背景
    background-size: 200% 200%;
    animation: bg-position 15s ease infinite;
    background-image: linear-gradient(-45deg, #ffabab, #99bef6, #ffabab);

    // 渐变背景
    @keyframes bg-position {
        0%,
        100% {
            background-position: 0 0;
        }
        50% {
            background-position: 50% 50%;
        }
    }
    @include global.useTheme(
        light,
        (
            background-image: linear-gradient(-45deg, #ffabab, #99bef6, #ffabab),
        )
    );
    @include global.useTheme(
        dark,
        (
            background-image: linear-gradient(-45deg, #da9797, #99bef6, #da9797),
        )
    );

    .header {
        position: fixed;
        top: global.$gap;
        left: global.$gap;
        width: calc(100% - #{global.$gap} * 2);
        border: global.$border;
        box-shadow: global.$box-shadow;
        background-color: global.$background-color;
        border-radius: global.$border-radius;
        backdrop-filter: global.$backdrop-filter;
        z-index: 1;

        @include global.useTheme(
            plain,
            (
                border-radius: unset,
                backdrop-filter: unset,
                width: unset,
                position: static,
                box-shadow: none,
                background-color: #ffffff22,
            )
        );
    }

    .author-main {
        flex: 1;
        justify-content: space-between;
        background-color: global.$background-color;
        box-shadow: global.$box-shadow;
        backdrop-filter: global.$backdrop-filter;
        border: global.$border;
        border-radius: global.$border-radius;

        margin: calc(#{global.$header-height} + #{global.$gap} * 2) global.$gap
            global.$gap;

        @include global.useTheme(
            plain,
            (
                margin: global.$gap,
                backdrop-filter: unset,
                box-shadow: none,
                background-color: #ffffff22,
            )
        );
    }
}
</style>
